<template>
  <el-container class="home-container">
    <el-container>
      <el-header>
        <el-menu
            router
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="/libraryManager">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的主页</template>
            <el-menu-item index='/privateMsg' :class="$route.path=='/privateMsg'?'is-active':''">个人信息</el-menu-item>
            <el-menu-item index="2-2">收藏</el-menu-item>
            <el-menu-item @click="drawer = true" type="primary">借阅</el-menu-item>
          </el-submenu>
        </el-menu>
        <div class="title">
          <span>图书借阅系统</span>
        </div>
        <div class="home_userinfoContainer">
          <el-dropdown>
          <span class="el-dropdown-link home_userinfo">
            欢迎您，{{user.uname}}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-drawer
          title="收藏"
          :visible.sync="drawer"
          :direction="direction"
          :size="size"
          @open="handleOpen"
          :before-close="handleClose">
        <el-row class="display-one" v-for="value in booksForm">
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <Books :book="value"/>
              <el-button @click="borrow(value)" type="danger">取消借阅</el-button>
              <hr/>
            </div>
          </el-col>
        </el-row>
      </el-drawer>
    </el-container>

    <el-container class="home-main">
      <el-main>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/booksDisplay' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>

    <el-footer>@ LHY</el-footer>
  </el-container>
</template>

<script>
import Books from "@/components/Books";

export default {
  name: "LibraryManager",
  components:{
    Books
  },
  data() {
    return {
      activeIndex2: '1',
      user:'',
      drawer: false,
      direction: 'rtl',
      booksForm: '',
      userForm:'',
      userId:'',
      kinds:'',
      flag:true,
      size:'50%'
    };
  },
  methods: {
    logout() {
      let _this = this;
      this.$confirm('注销登陆吗?', '提示', {
        confirmButtonText: "确定",
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        localStorage.removeItem('user')
        localStorage.removeItem("isLogin")
        _this.$router.replace({path: '/'})
      })
    },
    handleSelect(key, keyPath) {
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleOpen(){
      this.flag=!this.flag
    },
    borrow(value){
      const _this=this
      axios.get("http://localhost:8089/borrow/deleteBorrow",{params:value}).then(
          function (response){
            console.log(response);
            if (response.data.code == 0){
              _this.$confirm('确认删除吗?','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
              }).then(()=>{
                _this.flag=!_this.flag
              }).catch(()=>{
                this.$message({
                  type:'info',
                  message:'已取消删除'
                })
              })
            }
          }
      )
    }
  },
  watch:{
    flag:{
      handler(){
        const _this = this
        _this.userForm=JSON.parse(localStorage.getItem("user"));
        _this.userId=_this.userForm.uid
        axios.get("http://localhost:8089/borrow/pageList" + "/"+_this.userId).then(
            function (response) {
              if (response.data.code != 1) {
                _this.booksForm = response.data.data
                _this.total = response.data.data.total
                console.log(response.data.data)
              }
            }
        );
      }
    }
  },
  created() {
    this.user=JSON.parse(localStorage.getItem("user"));
    const _this = this
    _this.userForm=JSON.parse(localStorage.getItem("user"));
    _this.userId=_this.userForm.uid
    axios.get("http://localhost:8089/borrow/pageList" + "/"+_this.userId).then(
        function (response) {
          if (response.data.code != 1) {
            _this.booksForm = response.data.data
            _this.total = response.data.data.total
            console.log(response.data.data)
          }
        }
    );
    axios.get("http://localhost:8089/kinds/getKinds").then(
        function (response) {
          _this.kinds=response.data.data
        }
    )
  },
}
</script>

<style scoped>
.home-container,h3{
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.el-header, .el-footer {
  background-color: #545c64;
  color: #333;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}


.home-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  height: 100%;
}


.el-container:nth-child(5)
.el-container:nth-child(6){
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.title{
  width: 20%;
  position: absolute;
  color: white;
  right: 40%;
  font-size: 30px;
}
.home_userinfo{
  color: white;
  font-size: 20px;
}
.home_userinfoContainer{
  position: absolute;
  right: 5%;
}

</style>